<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单列表</title>
    <link rel="stylesheet" href="/css/supplies/bootstrap.min.css">
    <link rel="stylesheet" href="/css/loading.css">
    <link rel="stylesheet" href="/icon/css/font-awesome.min.css">
    <link rel="stylesheet" href="/js/supplies/bootstrap-table/bootstrap-table.min.css"/>
    <link rel="stylesheet" href="/css/supplies/common.css"/>
    <link rel="stylesheet" href="/css/supplies/myOrder/myorder.css">
    <link rel="stylesheet" href="/js/select_js/select.css">
    <style>
        #list_order {
            margin-top: 10px;
        }

        .btn-1 {
            height: 32px;
            width: 100px;
            background-color: white;
            color: orange;
            border: 1px solid orange;
        }

        .bnt-left {
            margin-right: 22px;
        }

        .form-body table {
            width: 100%;
            text-align: center;
        }

        .activeSelected {
            color: #FF690D;
        }

        .table {
            margin-bottom: 0px;
        }

        .floatleft {
            position: relative;
            width: 530px;
            float: left;
        }

        .floatleft .select_box {
            float: left;
            width: 218px;
        }

        .floatleft .input {
            width: 300px;
            float: right;
        }

        .floatleft .order1 {
            float: left;
            width: 80px;
        }

        .floatleft .order2 {
            float: left;
            margin-left: 20px;
            width: 180px;
            height: 44px;
        }

        .floatleft .order3 {
            float: left;
            margin-left: 20px;
            width: 20px;
        }

        .floatright {
            float: right;

        }

        .placeholder {
            font-size: 14px;
        }

        .bg-color {
            color: #666666;
        }

        .bg-color2 {
            color: #999999;
        }
        #tr{
            overflow: hidden;
            width: 100%;
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 2px solid #E8E8E8;
        }
        .select_item{
            width: 24.5%;
            float: left;
            text-align: center;
        }
        /* 向左 三角行*/
        .triangle-left {
            width: 0;
            height: 0;
            border-top: 6px solid transparent;
            border-left: 7px solid #666666;
            border-bottom: 6px solid transparent;
            padding-top: 1px;
            margin-right: 4px;
            margin-top: 14px;
        }

        /* 向下 三角行*/
        .triangle-down {
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-top: 7px solid #666666;
            border-right: 6px solid transparent;
            border-bottom: 1px;
        }

        /* 向上 三角行*/
        .triangle-up {
            width: 0;
            height: 0;
            border-left: 6px solid transparent;
            border-bottom: 7px solid #666666;
            border-right: 6px solid transparent;
            border-top: 1px;
        }

        .input-f-1 {
            position: absolute;
            left: 254px;
            top: 18px;
        }

        .input-f-2 {
            position: absolute;
            left: 494px;
            top: 18px;
        }

        .table thead tr th, td {
            text-align: center;
            vertical-align: middle;
        }
        .table>tbody>tr>td{
            padding: 20px 0;
            border-top:0;
            border-bottom:1px solid #ddd;
        }
        .table>tbody>tr:last-child>td{
            border: 0;
        }
        .table>thead>tr>td{
            border-bottom: 0;
        }
        #list .list_img {
            width: 80px;
            height: 80px;
            float: left;
            margin-right: 10px;
        }
        #list .list_title {
            float: left;
            text-align: left;
            width: calc(100% - 90px);
            line-height: 80px;
            overflow: hidden;
        }

        .pagearea{
            padding-right: 20px;
        }

    </style>
</head>
<body>
<div id="list_order">
    <div class="form-body">
        <div class="floatleft">
            <div class="select_box" >
                <a class="triangle-left"></a>
                <span class="font_size_14">收货公司名称<br>consignee name</span>
                <ul>
                    <li @click="selectSearch(1)">收货公司名称<br>consignee name</li>
                    <li @click="selectSearch(2)">收货公司地址<br>consignee address</li>
                </ul>
            </div>
            <div class="input" >
                <div class="placeholder " style="width: 300px ;height: 50px" id="company_info_div">请填写收货公司名称<br/>receiving company name</div>
                <input type="text" class="company_name input_placeholder" name="" v-model="info" value=""
                       style="height: 45px ;width: 98%">
            </div>
        </div>
        <div style="clear: both;"></div>
        <div class="floatleft" style="margin-top: 20px">
            <div class="order1">
                <span class="font_size_14">下单时间</span> <br>
                <span class="font_size_14 bg-color">order time</span>
            </div>
            <div onclick="getDateAndStyle('startTime')">
                <div class="triangle-down input-f-1"></div>
                <input type="text"  class="order2" onblur="displayIcon('startTime')"
                       name="startTime" id="startTime">
            </div>
            <div class="order3">
                <span class="font_size_14">至</span> <br>
                <span class="font_size_14 bg-color">to</span>
            </div>
            <div onclick="getDateAndStyle('endTime')">
                <div class="triangle-down input-f-2"></div>
                <input type="text"  class="order2" onblur="displayIcon('endTime')"
                       name="startTime" id="endTime">
            </div>

        </div>
        <div class="floatright" style="margin-top:26px;">
            <button class=" bnt-left btn-1" @click="selectDate('7')">
                最近7天
            </button>
            <button class=" btn-1 " @click="selectDate('30')">
                最近30天
            </button>
        </div>
        <div class="clear: both;" style="margin-top: 92px"></div>
        <div class="floatright">
            <button class="bnt-left btn-2" type="button" @click="req()" id="findPut"
                    style="width: 100px;border: 0">
                查找search
            </button>
            <button class="btn-2" type="reset" @click="reset()" style="width: 100px;border: 0">
                重置reset
            </button>

        </div>

        <div style="clear: both;margin-bottom: 20px"></div>
    </div>
    <div class="form-body" style="margin-bottom: 0px">
        <div id="tr" class="bg-color2">
            <!--<div class="b select_item activeSelected" @click="status($event,'')">-->
                <!--<span class="font_size_14">全部</span> <br>-->
                <!--<span class="font_size_14">all</span>-->
            <!--</div>-->
            <div class="b select_item activeSelected" @click="status($event,1)">
                <span class="font_size_14">待确认</span> <br>
                <span class="font_size_14">to be confirmed</span>
            </div>
            <div class="b select_item" @click="status($event,2)">
                <span class="font_size_14">已确认</span> <br>
                <span class="font_size_14">confirmed</span>
            </div>
            <!--<div class="b select_item" @click="status($event,5)">-->
                <!--<span class="font_size_14">交易成功</span> <br>-->
                <!--<span class="font_size_14">to be evaluated</span>-->
            <!--</div>-->
            <div class="b select_item" @click="status($event,4)">
                <span class="font_size_14">交易成功</span> <br>
                <span class="font_size_14">transaction is successful</span>
            </div>
            <div class="b select_item" @click="status($event,6)">
                <span class="font_size_14">交易取消</span> <br>
                <span class="font_size_14">cancel a deal</span>
            </div>
        </div>
        <table class=" table table-hover table-responsive " id="list_order_table" v-loading="loading">
            <thead>
            <tr style="text-align: center" class="color-6">
                <td style="width: 25%;">
                    <span class="font_size_14">订单编号</span> <br>
                    <span class="font_size_14">order number</span>

                </td>
                <td style="width: 25%">
                    <span class="font_size_14">收货公司名称</span> <br>
                    <span class="font_size_14">name of the receiving company</span>
                </td>
                <td style="width: 15%">
                    <span class="font_size_14">下单时间</span> <br>
                    <span class="font_size_14">order time</span>
                </td>
                <td style="width: 15%">
                    <span class="font_size_14">联系电话</span> <br>
                    <span class="font_size_14">contact phone number</span>
                </td>
                <td style="width: 10% ;text-align: center">
                    <span class="font_size_14">交易状态</span> <br>
                    <span class="font_size_14">trasaction status</span>
                </td>
                <td style="width: 10% ;text-align: center">
                    <span class="font_size_14">操作</span> <br>
                    <span class="font_size_14">opreate</span>
                </td>
            </tr>
            </thead>
            <tbody id="list" style="border-bottom: 1px solid #ddd">
            <tr v-for="tiem in items"   style="text-align: center;" >
                <td style="text-align: left;width: 23%;min-width: 330px"  @click="loadInfo(tiem.id)">
                    <img style="width: 80px;height: 80px" :src="url+tiem.product_image" />
                    <span v-text="tiem.order_no" class="font_size_16" style="overflow: hidden"></span>
                </td>
                <td @click="loadInfo(tiem.id)">
                    <p class="font_size_14">{{tiem.company_name}}</p>
                    <p class="font_size_14 color-6">{{tiem.company_name_english}}</p>
                </td>
                <td v-html="getTimeFormat(tiem.add_time)"@click="loadInfo(tiem.id)"></td>
                <td><p class="font_size_16">{{tiem.tel}}</p></td>
                <td v-html="cooktype(tiem.status)" style="text-align: center;padding-right: 8px" @click="loadInfo(tiem.id)"></td>
                <td style="text-align: center;padding-right: 8px">
                    <a href='javascript:void(0);' class='detail_a'  @click="opreate(tiem.id)">查看详情</a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="pagearea">
        <img src="/image/supplies/page_lower.png" @click="nextPage($event)"  >
        <img src="/image/supplies/page_upper.png" style="margin-right: 10px"  @click="upPage($event)">
        <div class="page-total margin-right ">共0条记录 <br>
            <div class="color-9">total 0 records</div>
        </div>
    </div>
</div>

</div>
<div class="page-body-footer "></div>
<!--获取商户端id-->
</body>

<script src="/js/supplies/jquery.min.js"></script>
<script src="/js/select_js/select.js"></script>
<script src="/js/supplies/bootstrap.min.js"></script>
<script src="/js/supplies/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/js/supplies/common.js"></script>
<script src="/js/supplies/common_input.js"></script>
<script src="/js/vue.js"></script>
<script src="/js/vue-resource.js"></script>
<script src="/js/layer.js"></script>
<script src="/js/loading.js"></script>
<script src="/js/supplies/laydate/laydate.js"></script>
<script>
    $(function () {
        getDate("startTime");
        getDate("endTime");
        //getUserToken();
    });
    /*
     * @description : 获取订单列表
     * @params: 
     * @author : peng huaneng
     * @date : 2018/1/18 10:29
     */
    var app = new Vue({
        el: "#list_order",
        data: {
            items: [],//订单列表
            searchs: {
                name: '',//公司名搜索
                startTime: '',//开始时间搜索
                endTime: '',//结束时间搜索
                status: 1,//状态搜索
                address: '',//地址搜索
                day: '',//天数搜索：最近7天与最近30天
                page: '1',//分页：默认首页
                type:'',//判断app端
                supplier_id: localStorage.getItem("suppliesId")//默认加载商户id，浏览器获取
            },
            value: 1,//区分公司名称与公司地址
            maxPage: '',//最大分页数
            info: '',
            url:oss_url,
            loading: true
        },
        methods: {
            req: function () {
                this.loading = true;
                if (1 == this.value) {
                    //公司名称搜索
                    this.searchs.name       = this.info;
                    this.searchs.address    = '';
                } else if (2 == this.value) {
                    //按照公司地址搜索
                    this.searchs.address    = this.info;
                    this.searchs.name       = '';
                }
                this.searchs.startTime  = $('#startTime').val();
                this.searchs.endTime    = $('#endTime').val();
                var startTime           = Date.parse($('#startTime').val());
                var endTime             = Date.parse($('#endTime').val());
                if(startTime > endTime){
                    layer.msg('时间输入有误',{
                        skin:'winning-class',//自定义样式winning-class
                        time:3000
                    });
                }
                var url = '__APP__/apishop/index/getOrderList';
                this.$http.post(url, this.searchs, {
                    emulateJSON: true
                }).then(function (res) {
                    this.items      = res.body['list'];
                    this.maxPage    = res.body['maxPage'];
                    $str = "共" + res.body['count'] + "条记录 " + "<br/>" + "<div class='color-9'>total" + res.body['count'] + " records</div>";
                    $('.page-total').html($str);
                    this.loading = false;
                }, function (res) {

                });
            },
            selectSearch:function(value){
                this.value = value;
                if(1==value){
                    $("#company_info_div").html('请填写收货公司名称<br/>receiving company name')
                }
                if(2==value){
                    $("#company_info_div").html('请填写收货公司地址<br/>receiving company address')
                }
            },
            reset:function(){
                this.info = '';
                $("#startTime").val('');
                $("#endTime").val('');
                this.searchs.day = '';
                this.searchs.name = '';
                this.searchs.address = '';
                this.searchs.startTime = '';
                this.searchs.endTime = '';
            },
            cooktype: function (n) {
            var str ;
            switch (n){
                case 1:
                    str = '<p   class="font_size_14">待处理</p>';
                    str += '<p class="font_size_14">Pending</p>';
                    break ;
                case 2:
                    str = '<p   class="font_size_14">待发货</p>';
                    str += '<p class="font_size_14">Pending delivery</p>';
                    break ;
                case 3:
                    str = '<p   class="font_size_14">交易成功 </p>';
                    str += '<p class="font_size_14">Transaction successful</p>';
                    break ;
                case 4:
                    str = '<p   class="font_size_14">交易成功 </p>';
                    str += '<p class="font_size_14">Transaction successful</p>';
                    break ;
                case 6:
                    str = '<p  class="font_size_14">交易关闭 </p>';
                    str += '<p class="font_size_14">Transaction closed</p>';
                    break ;
             /*   case 5:
                    str = '<p   class="font_size_14">待评价 </p>';
                    str += '<p class="font_size_14">To be evaluated</p>';
                    break ;
                case 7:
                    str = '<p   class="font_size_14">交易成功 </p>';
                    str += '<p class="font_size_14">Transaction successful</p>';
                    break ;*/
                default:break;
            }
            return str ;
            },
            getTimeFormat: function (val) {
                var result = val.split(" ");
                var time = result[1];
                time = time.substr(0, time.length - 3);
                var str = '<p  class="font_size_16">' + result[0].replace(/-/g, "/") + '</p>';
                str += '<p class="font_size_16">' + time + '</p>';
                return str;
            },
            status: function (event, status) {
                $("#tr").find("div").each(function () {
                    $(this).removeClass("activeSelected");
                });
                $(event.currentTarget).addClass("activeSelected");
                this.searchs.status = status;
                this.searchs.page = 1;
                this.req();
            },
            upPage: function () {
                this.searchs.page--;
                if (this.searchs.page < 1) {
                    this.searchs.page = 1;
                    return;
                }
                this.req();
            },
            nextPage: function () {
                this.searchs.page++;
                if (this.searchs.page > this.maxPage) {
                    this.searchs.page = this.maxPage;
                    return;
                }
                this.req();
            },
            setMoreSwitch: function () {
                if (0 == setFlag) {
                    setFlag = 1;
                    $(".checkbox").css("display", "block");
                } else {
                    setFlag = 0;
                    $(".checkbox").css("display", "none");
                }
            },
            loadInfo: function (id) {
                var supplier_id = localStorage.getItem("suppliesId");
                window.parent.detailsHighlight(true);
                location.href = '__APP__/supplies/index/detailsOrder?id=' + id +'&supplier_id=' + supplier_id;
            },
            opreate: function (id) {
                var supplier_id = localStorage.getItem("suppliesId");
                window.parent.operationHighlight(true);
                localStorage.orderId = id;
                var order_id    = localStorage.getItem("orderId");
                location.href = '__APP__/supplies/index/operationOrder';
            },
            selectDate: function (days) {
                this.searchs.day = days;
                this.req();
            }
        },
        mounted: function () {
            this.req();
            // this.search();
        }
    });
    function getDateAndStyle(location) {
        showIcon(location);
        getDate(location);
    }
    function displayIcon(location) {
        $("#" + location).prev().removeClass("triangle-up");
        $("#" + location).prev().addClass("triangle-down");
    }
    function showIcon(location) {
        $("#" + location).prev().removeClass("triangle-down");
        $("#" + location).prev().addClass("triangle-up");
    }
    function getDate(location) {
        laydate.render({
            elem: '#' + location,//指定元素
            min: -31,
            max: 0,
            type: 'date',
            trigger: 'click', //单击确认 只适合 date
            lang: 'en',//国际版
            showBottom: false //不显示底部
        });
    }
</script>
</html>